<template>
  <scale-box class="data-screen-container" :width="width" :height="height">
    <border-box-9>
      <!-- 头部 -->
      <div class="data-screen-header">
        <div class="header-lf">
          <!-- <span class="header-screening" @click="router.push(HOME_URL)">首页</span> -->
        </div>
        <div class="header-ct">
          <div class="header-ct-title">
            <span>无线网络健康度监测平台</span>
            <!-- <div class="header-ct-warning">平台高峰预警信息（2条）</div> -->
          </div>
        </div>
        <div class="header-rg">
          <span class="header-download" @click="goback">返回</span>
          <span class="header-time">当前时间：{{ cruuentTime }}</span>
        </div>
      </div>

      <!-- 主体 -->
      <div class="data-screen-main">
        <!-- 主体左 -->
        <left-page />

        <!-- 主体中 -->
        <center-page />

        <!-- 主体右 -->
        <right-page />
      </div>
    </border-box-9>
  </scale-box>
</template>

<script setup>
// vue - core
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter /* useRoute */ } from "vue-router";
// datav
import { BorderBox9 } from "@kjgl77/datav-vue3";
// pages
import LeftPage from "./components/LeftPage.vue";
import CenterPage from "./components/CenterPage.vue";
import RightPage from "./components/RightPage.vue";
// utils
import ScaleBox from "@/components/SacaleAuto/index.vue";
import { getDateTimeNowFormate } from "@/utils/index.js";
// api
// api相关
import { apiCommon } from "@/utils/index.js";
import * as screenApi from "@/api/screen/screen";

/** props 参数 */
const props = defineProps({
  width: {
    type: Number,
    default: window.screen.width,
  },
  height: {
    type: Number,
    default: window.screen.height,
  },
});

let cruuentTime = ref(getDateTimeNowFormate());
let timmer = ref(null);
const router = useRouter();
// const route = useRoute()m

// 接口测试
const apiTest = async () => {
  let params = {};
  const testData = await apiCommon(screenApi.getInfo, params);
  console.log(testData);
};
// apiTest()

const goback = () => {
  router.push("/");
};

// 页面初始化
const initPage = () => {
  // console.log('页面初始化')

  getcurrntTime(); //获取当前时间
};

// 获取当前时间
const getcurrntTime = () => {
  timmer.value = setInterval(() => {
    cruuentTime.value = getDateTimeNowFormate();
  }, 1000);
};

/**
 * 钩子
 */
// 挂载
onMounted(() => {
  initPage(); // 页面初始化
});

// 注销
onUnmounted(() => {
  clearInterval(timmer.value);
});

</script>

<style lang="scss" scoped>
.data-screen-container {
  /* background: #091f3f; */
  background: #05091B;

  :deep .scale_box {
    background: #05091b;

    .dv-border-box-9 {
      // width: 100.15%;

      .dv-border-svg-container {
        left: -3px;
      }

      .data-screen-header {
        display: flex;
        width: 98.8%;
        height: 38px;
        margin: 10px auto 0;

        .header-lf,
        .header-rg {
          position: relative;
          width: 567px;
          height: 100%;
          background: url("./images/data-screen-header-left-bg.png") no-repeat;
          background-size: 100% 100%;
        }

        .header-ct {
          position: relative;
          flex: 1;
          height: 100%;

          .header-ct-title {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 82px;
            font-family: YouSheBiaoTiHei;
            font-size: 32px;
            line-height: 78px;
            color: #05e8fe;
            text-align: center;
            letter-spacing: 4px;
            background: url("./images/data-screen-header-center-bg.png") no-repeat;
            background-size: 100% 100%;

            .header-ct-warning {
              position: absolute;
              bottom: -42px;
              left: 50%;
              width: 622px;
              height: 44px;
              font-family: YouSheBiaoTiHei;
              font-size: 14px;
              line-height: 44px;
              color: #ffffff;
              text-align: center;
              letter-spacing: 1px;
              background: url("./images/data-screen-header-warn-bg.png") no-repeat;
              background-size: 100% 100%;
              transform: translateX(-50%);
            }
          }
        }

        .header-screening,
        .header-download {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 9;
          box-sizing: border-box;
          width: 136px;
          height: 42px;
          padding-right: 4px;
          font-family: YouSheBiaoTiHei;
          font-size: 18px;
          font-weight: 400;
          line-height: 42px;
          color: #29fcff;
          text-align: center;
          cursor: pointer;
          background: url("./images/data-screen-header-btn-bg-l.png") no-repeat;
          background-size: 100% 100%;
        }

        .header-download {
          left: 0;
          padding-right: 0;
          background: url("./images/data-screen-header-btn-bg-r.png") no-repeat;
        }

        .header-time {
          position: absolute;
          top: 0;
          right: 14px;
          width: 310px;
          font-family: YouSheBiaoTiHei;
          font-size: 17px;
          font-weight: 400;
          line-height: 38px;
          color: #05e8fe;
          white-space: nowrap;
        }
      }

      .data-screen-main {
        display: flex;
        /* box-sizing: border-box;
        display: flex;
        flex: 1;
        width: 100%;
        padding: 12px 42px 20px; */

        .data-screen-lf,
        .data-screen-rg {
          flex: 1;
          margin-top: 15px;

          .data-screen-top,
          .data-screen-center {
            margin-bottom: 23px;
          }

          .data-screen-top,
          .data-screen-center,
          .data-screen-bottom {
            .data-screen-main-cont {
              height: 264px;
              overflow: hidden;
            }
          }

          /* .data-screen-top {
            .data-screen-main-cont {
              height: 250px
            }
          }
          .data-screen-center {
            .data-screen-main-cont {
              height: 250px
            }
          }
          .data-screen-bottom {
            .data-screen-main-cont {
              height: 250px
            }
          } */
        }

        .data-screen-lf,
        .data-screen-rg,
        .data-screen-ct {
          .data-screen-main-title {
            width: 100%;
            background: linear-gradient(to right, #225a74, #05091b);
            border-bottom-left-radius: 10px;
            margin-bottom: 10px;
            font-size: 12px;

            /* background: url("./images/subTitle-bg.png") no-repeat; */
            span {
              display: block;
              padding: 13px 0 13px 15px;
              width: 100%;
              /* color: #00c7d8; */
              color: #fff;
              font-weight: bold;
              font-size: 25px;
            }
          }

          .data-screen-main-cont {
            width: 100%;
            padding-top: 15px;
            padding-left: 5px;
            /* margin-left: 3px; */
            /* margin-top: 2px; */
            box-sizing: border-box;
            min-height: 100px;
          }
        }

        .data-screen-lf {
          margin-left: 20px;
        }

        .data-screen-rg {
          margin-right: 16px;
        }

        .data-screen-ct {
          width: 49%;
          padding: 60px 12px 0 12px;
        }
      }

      /* .data-screen-main {
        box-sizing: border-box;
        display: flex;
        flex: 1;
        width: 100%;
        padding: 12px 42px 20px;

        .data-screen-ct {
          display: flex;
          flex: 1;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
          margin-right: 40px;

          .data-screen-map {
            position: relative;
            box-sizing: border-box;
            flex: 1;
            width: 100%;
            margin-top: 78px;

            .data-screen-map-title {
              position: absolute;
              top: 10px;
              left: 0;
              z-index: 99;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              width: 270px;
              height: 25px;
              padding-left: 30px;
              font-size: 14px;
              color: #ffffff;
              letter-spacing: 5px;
              background: url("./images/map-title-bg.png") no-repeat;
              background-size: 100% 100%;
            }

            .data-screen-alarm {
              position: absolute;
              top: 0;
              left: 0;
              z-index: 99;
              box-sizing: border-box;
              width: 100%;
              height: 76px;
              padding: 2px 30px;
              overflow: hidden;
              background: url("./images/data-screen-warn-bg.png") no-repeat;
              background-size: 100% 100%;

              .map-item {
                display: flex;
                align-items: center;
                height: 37px;
                cursor: pointer;

                img {
                  width: 15px;
                  height: 15px;
                  margin-top: 3px;
                  margin-right: 6px;
                }

                span {
                  font-size: 18px;
                  color: rgb(255 183 0 / 74.7%);
                }
              }
            }
          }

          .data-screen-cb {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            height: 252px;
            padding-top: 54px;
            background: url("./images/data-screen-main-cb.png") no-repeat;
            background-size: 100% 100%;
          }
        }

        .data-screen-rg {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 394px;
          // height: 100%;

          .data-screen-top,
          .data-screen-center,
          .data-screen-bottom {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            padding-top: 54px;
          }

          .data-screen-top {
            // height: 37%;
            // background: url("./images/data-screen-main-rt.png") no-repeat;
            // background-size: 100% 100%;
          }

          .data-screen-center {
            height: 30%;
            background: url("./images/data-screen-main-rc.png") no-repeat;
            background-size: 100% 100%;
          }

          .data-screen-bottom {
            height: 27%;
            margin-bottom: 0;
            background: url("./images/data-screen-main-rb.png") no-repeat;
            background-size: 100% 100%;
          }
        }

        .data-screen-main-title {
          position: absolute;
          top: 1px;
          left: 0;
          display: flex;
          flex-direction: column;

          span {
            margin-bottom: 12px;
            font-family: YouSheBiaoTiHei;
            font-size: 16px;
            line-height: 16px;
            color: #ffffff;
            letter-spacing: 1px;
          }

          img {
            width: 68px;
            height: 7px;
          }
        }

        .data-screen-main-chart {
          width: 100%;
          height: 100%;
        }
      } */
    }
  }
}
</style>
